<template>
	<view class="uni-container">
		<!-- <button @click="a">123 </button> -->
		<view class="statistcs-card">
			<el-row :gutter="10">
				<el-col :span="8">
					<el-card>
						<div>今日登记</div>
						<div>{{todayNumber}}</div>
					</el-card>
				</el-col>
				<el-col :span="8">
					<el-card>
						<div>本周总计</div>
						<div>{{weekNumber}}</div>
					</el-card>
				</el-col>
				<el-col :span="8">
					<el-card>
						<div>本月总计</div>
						<div>{{monthNumber}}</div>
					</el-card>
				</el-col>

			</el-row>
		</view>
		<view class="day-trend">
			<view class="day-trend-title">
				近7天登记趋势
			</view>
			<view class="day-trend-chart">
				<l-echart ref="dayChartRef" />
			</view>
		</view>
		<view class=" distribution">
			<view class=" distribution-title">
				车辆停放时长分布
			</view>
			<view class=" distribution-chart">
				<l-echart ref="distributionChartRef" />
			</view>
		</view>

	</view>
</template>

<script setup lang='ts'>
	import * as echarts from 'echarts'
	import useStatisticsStore from '@/store/main/statistics/statistics'
	import {
		nextTick,
		ref
	} from 'vue';
	import {
		onMounted
	} from 'vue';
	import {
		storeToRefs
	} from 'pinia'
	const statisticsStore = useStatisticsStore()
	const distributionChartRef = ref(null)
	let dayTrendInstance;
	let distributionInstance;
	const dayChartRef = ref(null)
	const {
		todayNumber,
		weekNumber,
		monthNumber,
		dateList,
		registerNumList,
		parkDistributionList
	} = storeToRefs(statisticsStore)
	const initDayTrend = async () => {
		if (!dayChartRef.value) return
		dayTrendInstance = await dayChartRef.value.init(echarts)
		dayTrendInstance.setOption({

			xAxis: {
				type: 'category',
				data: dateList.value
			},
			yAxis: {
				type: 'value'
			},
			legend: {
			    data: ['登记数量'],
			    bottom:10,
				icon:'rect'
			    },
			series: [{
				name:'登记数量',
				data: registerNumList.value,
				type: 'line'
			}]
		})
	}
	const initDistribution = async () => {
		if (!distributionChartRef.value) return
		distributionInstance = await distributionChartRef.value.init(echarts)
		distributionInstance.setOption({
			legend: {
				// Try 'horizontal'
				orient: 'horizontal',
				bottom: 10,
				icon: 'circle'
			},
			series: [{
				type: 'pie',
				data: parkDistributionList.value,
				label: {
					show: true,
					position: 'outside',
					formatter: '{d}%'
				},

			}]
		})
	}



	onMounted(async () => {
		await statisticsStore.getTodayNumber()
		await statisticsStore.getWeekNumber()
		await statisticsStore.getMonthNumber()
		await statisticsStore.getWeekTrend()
		await statisticsStore.getDistribution()
		nextTick(() => {
			initDayTrend()
			initDistribution()
		})
		console.log(parkDistributionList.value)
	})
	// statisticsStore.getTodayNumber();
</script>

<style>
	.uni-container {
		padding: 25rpx;
	}
</style>